<template>
  <div>
    <el-tooltip effect="dark" :content="tooltipContent" placement="bottom" :enterable="false">
      <div @click="fullScreen" style="cursor:pointer">
        <svg v-if="fullScreenState" t="1659185966250" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="3806" width="24" height="24">
          <path
            d="M912 48h-800c-35.296 0-64 28.704-64 64v800c0 35.296 28.704 64 64 64h800c35.296 0 64-28.704 64-64v-800c0-35.296-28.704-64-64-64z m-800 864v-800h800l0.064 800H112z"
            p-id="3807"></path>
          <path
            d="M368.896 192a32 32 0 0 0-32 32v105.888H224a32 32 0 0 0 0 64h144.896a32 32 0 0 0 32-32V224a32 32 0 0 0-32-32zM784.864 329.888H672V224a32 32 0 1 0-64 0v137.888a32 32 0 0 0 32 32h144.864a32 32 0 1 0 0-64zM368.896 640H224a32 32 0 1 0 0 64h112.896v105.92a32 32 0 1 0 64 0V672a32 32 0 0 0-32-32zM784.864 640H640a32 32 0 0 0-32 32v137.92a32 32 0 1 0 64 0V704h112.864a32 32 0 1 0 0-64z"
            p-id="3808"></path>
        </svg>
        <svg v-else t="1659185983008" class="icon" viewBox="0 0 1024 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="3961" width="24" height="24">
          <path
            d="M368.896 192H224a32 32 0 0 0-32 32v137.888a32 32 0 0 0 64 0V256h112.896a32 32 0 0 0 0-64zM784.864 192H640a32 32 0 1 0 0 64h112.864v105.888a32 32 0 1 0 64 0V224a32 32 0 0 0-32-32zM368.896 777.92H256V672a32 32 0 1 0-64 0v137.92a32 32 0 0 0 32 32h144.896a32 32 0 1 0 0-64zM784.864 640a32 32 0 0 0-32 32v105.92H640a32 32 0 1 0 0 64h144.864a32 32 0 0 0 32-32V672a32 32 0 0 0-32-32z"
            p-id="3962"></path>
          <path
            d="M912 48h-800c-35.296 0-64 28.704-64 64v800c0 35.296 28.704 64 64 64h800c35.296 0 64-28.704 64-64v-800c0-35.296-28.704-64-64-64z m-800 864v-800h800l0.064 800H112z"
            p-id="3963"></path>
        </svg>
      </div>
    </el-tooltip>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
// 全屏状态
let fullScreenState = ref(false);
// 全屏方法
const fullScreen = () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();// 退出全屏
    fullScreenState.value = false// 全屏状态为false
  } else {
    document.documentElement.requestFullscreen();// 开启全屏
    fullScreenState.value = true// 全屏状态为true
  }
};
const tooltipContent = computed(() => fullScreenState.value ? "退出全屏" : "点击全屏");//用来显示tooltip上的文字
</script>

<style scoped>
</style>